<script setup>
/**
 * @import libs
 */
import { ref } from "vue";
import { onMounted } from "vue";
import { storeToRefs } from "pinia";

/**
 * pinia stores
 */
// pinia -> usePetDoctorPageStore
import { usePetDoctorPageStore } from "@/stores/petDoctor/petDoctorPage.js";

/**
 * @param inputValue 对话输入框内容
 * @param chatInputPlaceholder 输入框提示文字
 */
let {chatInputValue,chatInputPlaceholder} = storeToRefs(usePetDoctorPageStore())

/**
 * @function chatInputInput 输入框输入事件
 * @function chatInputConfirm 输入框确认事件
 * @function chatClickAddFile 点击添加文件按钮
 * @function chatClickAddEmoji 点击添加表情按钮
 * @function chatClickAddVoice 点击添加语音按钮
 */
const {chatInputInput,chatInputConfirm,chatClickAddFile,chatClickAddEmoji,chatClickAddVoice} = usePetDoctorPageStore()


/**
 * 点击添加文件按钮事件
 */
const chatClickAddFileEvent = () => {
    chatClickAddFile()
}

/**
 * 点击添加表情按钮事件
 */
const chatClickAddEmojiEvent = () => {
    chatClickAddEmoji()
}

/**
 * 点击添加语音按钮事件
 */
const chatClickAddVoiceEvent = () => {
    chatClickAddVoice()
}
</script>

<template>
    <div class="chat-input-container">
        <div>
            <input class="input-class"placeholder-style=" color: #f1bf82;" type="text" :placeholder="chatInputPlaceholder" v-model="chatInputValue" @input="chatInputInput" @confirm="chatInputConfirm" />
        </div>
        <div class="icon-container">
            <div>
                <image class="img-icon-class" @click.stop="chatClickAddFileEvent" src="@/static/icons/add.svg" mode="aspectFill"></image>
            </div>
            <div>
                <image class="img-icon-class" @click.stop="chatClickAddEmojiEvent" src="@/static/icons/Smile.svg" mode="aspectFill"></image>
            </div>
            <div>
                <image class="img-icon-class" @click.stop="chatClickAddVoiceEvent" src="@/static/icons/microphone.svg" mode="aspectFill"></image>
            </div>
        </div>
    </div>
</template>

<style scoped>

.input-class {
    width: 360rpx;
    height: 70rpx;
    margin-left: 50rpx;
    color: #f1bf82;
    font-size: 25rpx;
}

.chat-input-container {
    width: 650rpx;
    height: 70rpx;
    border-radius: 64rpx;
    background-color: #ffffff;
    position: absolute;
    bottom: 7vh;
    left: 50%;
    transform: translateX(-50%);
    border: #c36f04 solid 3px;

}

.icon-container {
    width: 200rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: absolute;
    right: 40rpx;
    bottom: 0.1vh;
}

.img-icon-class {
    width: 50rpx;
    height: 50rpx;
}
</style>